import React, {Component} from "react";
import axios from "axios";
import ReactEcharts from 'echarts-for-react';
import picture from '../timg.jpg';
import {server_addr} from "../index";

export default class Profit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            option_1: {},
            option_2: {},
            option_3: {},
            option_4: {},
            option_5: {},
            option_6: {},
            option_7: {},
            option_8: {},
            option_9: {},
            default: "83%"
        }
        this.getData = this.getData.bind(this);
        this.Format = this.Format.bind(this);
    }

    getData(){
        var stock = window.location.href.split('?')[1].split('=')[1]
        //营业利润率
        axios.get(server_addr+"/profit/profitRatio?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]*100);
                data_2.push(res.data[key].split(',')[1]*100);
            }
            this.setState({
                option_1:{
                    tooltip: {trigger: 'axis', transitionDuration:0,
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;%</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    legend: {data: ['营业利润率', '行业平均营业利润率']},
                    grid: {
                        left: '20%',
                        right: '20%',
                        top: '20%'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.Format(dates),
                        axisLabel: {
                            fontSize: 9,
                            rotate: 35
                        }
                    },
                    yAxis: {
                        nameTextStyle:{
                            fontSize: 8
                        },
                        type: 'value',
                        min: 'dataMin',
                        max: 'dataMax',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                fontSize : 8      //更改坐标轴文字大小
                            }
                        }},
                    series: [
                        {
                            name: '营业利润率',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            data: data_1
                        },
                        {
                            name: '行业平均营业利润率',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            itemStyle:{
                                normal:{
                                    color:'green',
                                }
                            },
                            data: data_2
                        }
                    ]
                }})
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //净资产收益率
        axios.get(server_addr+"/profit/netAssetsIncomRatio?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]*100);
                data_2.push(res.data[key].split(',')[1]*100);
            }
            this.setState({
                option_2:{
                    tooltip: {trigger: 'axis', transitionDuration:0,
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;%</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    legend: {data: ['净资产收益率', '行业平均净资产收益率']},
                    grid: {
                        left: '20%',
                        right: '20%',
                        top: '20%'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.Format(dates),
                        axisLabel: {
                            fontSize: 9,
                            rotate: 35
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                fontSize : 8      //更改坐标轴文字大小
                            }
                        }},
                    series: [
                        {
                            name: '净资产收益率',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            data: data_1
                        },
                        {
                            name: '行业平均净资产收益率',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            itemStyle:{
                                normal:{
                                    color:'green',
                                }
                            },
                            data: data_2
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //主营业务收入
        axios.get(server_addr+"/profit/mainBusinessIncome?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
            }
            this.setState({
                option_3:{
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration:0,
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;元</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    legend: {data: ['主营业务收入', '行业平均主营业务收入']},
                    grid: {
                        left: '20%',
                        right: '20%',
                        top: '20%',
                    },
                    xAxis: [{
                        type: 'category',
                        data: this.Format(dates),
                        axisLabel: {
                            fontSize: 9,
                            rotate: 35
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    }],
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                fontSize : 8      //更改坐标轴文字大小
                            }
                        }},
                    series: [
                        {
                            name: '主营业务收入',
                            type: 'bar',
                            data: data_1,
                            itemStyle:{
                                normal:{
                                    barBorderRadius: 2.5
                                }
                            }
                        },
                        {
                            name: '行业平均主营业务收入',
                            type: 'line',
                            symbol: 'none',
                            itemStyle:{
                                normal:{
                                    color:'green',
                                    barBorderRadius: 2.5
                                }
                            },
                            data: data_2,
                            markLine: {
                                data: [
                                    {type: 'average', lineStyle:{type:"solid", width: 2.5}}
                                ]
                            }
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //每股收益
        axios.get(server_addr+"/profit/perShareProfit?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            let data_3= [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
                data_3.push(res.data[key].split(',')[2]);
            }
            this.setState({
                option_4:{
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration:0,
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;元</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    legend: {data: ['每股净资产', '每股收益', '行业平均每股收益']},
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line']},
                            restore: {show: true}
                        }
                    },
                    grid: {
                        left: '15%',
                        right: '5%'
                    },
                    xAxis: [{
                        type: 'category',
                        data: this.Format(dates),
                        axisPointer: {
                            type: 'shadow'
                        }
                    }],
                    yAxis: [{type: 'value', name: '元        '},{type: 'value', name: '        元'}],
                    series: [
                        {
                            name: '每股收益',
                            type: 'bar',
                            data: data_1,
                            itemStyle:{
                                normal:{
                                    barBorderRadius: 2.5
                                }
                            }
                        },{
                            name: '行业平均每股收益',
                            type: 'bar',
                            data: data_2,
                            itemStyle:{
                                normal:{
                                    color:'green',
                                    barBorderRadius: 2.5
                                }
                            }
                        },{
                            name: '每股净资产',
                            type: 'line',
                            smooth: true,
                            yAxisIndex: 1,
                            data: data_3
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //净利润
        axios.get(server_addr+"/profit/netProfit?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
            }
            this.setState({
                option_5:{
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration:0,
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;元</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    legend: {data: ['净利润', '行业平均净利润']},
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line']},
                            restore: {show: true}
                        }
                    },
                    grid: {
                        left: '15%',
                        right: '8%'
                    },
                    xAxis: [{
                        type: 'category',
                        data: this.Format(dates),
                        axisPointer: {
                            type: 'shadow'
                        }
                    }],
                    yAxis: [{type: 'value', name: '元        '}],
                    series: [
                        {
                            name: '净利润',
                            type: 'bar',
                            data: data_1,
                            itemStyle:{
                                normal:{
                                    barBorderRadius: 2.5
                                }
                            }
                        },
                        {
                            name: '行业平均净利润',
                            type: 'line',
                            symbol: "none",
                            itemStyle:{
                                normal:{
                                    color:'green',
                                    barBorderRadius: 2.5
                                }
                            },
                            data: data_2,
                            markLine: {
                                data: [
                                    {type: 'average', lineStyle:{type:"solid", width: 2.5}}
                                ]
                            }
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //销售毛利率
        axios.get(server_addr+"/profit/grossProfitRatio?stock="+stock,{}).then((res)=>{
            this.setState({
                option_6:{
                    series: [{
                        name: '销售毛利率',
                        type: 'gauge',
                        radius: "100%",
                        min: -100,
                        max: 100,
                        axisLine : {
                            show: true,
                            lineStyle: {
                                width: 20
                            }
                        },
                        axisLabel : {
                            distance : 0,
                            fontSize: 6
                        },
                        detail: {
                            formatter: '{value}%',
                            fontSize: 20
                        },
                        data: [{value: res.data}]
                    }]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //销售净利率
        axios.get(server_addr+"/profit/grossNetProfitRatio?stock="+stock,{}).then((res)=>{
           this.setState({
               option_7:{
                   series: [{
                       name: '销售净利率',
                       type: 'gauge',
                       radius: "100%",
                       min: -100,
                       max: 100,
                       axisLine : {
                           show: true,
                           lineStyle: {
                               width: 20
                           }
                       },
                       axisLabel : {
                           distance : 0,
                           fontSize: 6
                       },
                       detail: {
                           formatter: '{value}%',
                           fontSize: 20
                       },
                       data: [{value: res.data}]
                   }]
               }
           })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //成本费用利润率
        axios.get(server_addr+"/profit/costProfitRatio?stock="+stock,{}).then((res)=>{
            this.setState({
                option_8:{
                    series: [{
                        name: '成本利润率',
                        type: 'gauge',
                        radius: "100%",
                        min: -100,
                        max: 100,
                        axisLine : {
                            show: true,
                            lineStyle: {
                                width: 20
                            }
                        },
                        axisLabel : {
                            distance : 0,
                            fontSize: 6
                        },
                        detail: {
                            formatter: '{value}%',
                            fontSize: 20
                        },
                        data: [{value: res.data}]
                    }]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //盈余现金保障倍数
        axios.get(server_addr+"/profit/leftCashTimes?stock="+stock,{}).then((res)=>{
            this.setState({
                option_9:{
                    series: [{
                        name: '盈余现金保障倍数',
                        type: 'gauge',
                        radius: "100%",
                        min: -100,
                        max: 100,
                        axisLine : {
                            show: true,
                            lineStyle: {
                                width: 20
                            }
                        },
                        axisLabel : {
                            distance : 0,
                            fontSize: 6
                        },
                        detail: {
                            formatter: '{value}',
                            fontSize: 20
                        },
                        data: [{value: res.data}]
                    }]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
    }

    Format(dates){
        let new_dates = []
        for(var i=0; i<dates.length; i++){
            switch (dates[i].split('-')[1]) {
                case '03':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季1');
                    break;
                case '06':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季2');
                    break;
                case '09':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季3');
                    break;
                case '12':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季4');
                    break;
                default:
                    new_dates.push(dates[i]);
            }
        }
        return new_dates;
    }

    componentDidMount() {
        this.getData()
        this.interval = setInterval(()=>{
            if(this.props.location.state){
                this.setState({
                    default: "94%"
                })
            }else{
                this.setState({
                    default: "83%"
                })
            }
        },100)
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
        document.title = "财务状况分析";
        return (
            <div style={{width:this.state.default, height:"100vh", float:"right"}}>
                <ReactEcharts option={this.state.option_1} notMerge={true}
                              style={{width:"30%", height:"20vh", float:"left", margin:"5vh 0 0 5%"}}/>
                <ReactEcharts option={this.state.option_2} notMerge={true}
                              style={{width:"30%", height:"20vh", float:"left", marginTop:"5vh"}}/>
                <ReactEcharts option={this.state.option_3} notMerge={true}
                              style={{width:"30%", height:"20vh", float:"left", marginTop:"5vh"}}/>
                <div style={{width:"70%", height:"70vh", float:"left"}}>
                    <ReactEcharts option={this.state.option_4} notMerge={true}
                                  style={{width:"100%", height:"35vh", float:"left"}}/>
                    <ReactEcharts option={this.state.option_5} notMerge={true}
                                  style={{width:"100%", height:"35vh", float:"left"}}/>
                </div>
                <div style={{width:"23%", height:"70vh", float:"left"}}>
                    <p style={{width:"5vw", fontWeight:"bold", fontHeight:"20vw", float:"left", marginLeft:"10%"}}>销售毛利率</p>
                    <ReactEcharts option={this.state.option_6} notMerge={true}
                                  style={{width:"100%", height:"18vh", marginLeft:"5%"}}/>
                    <p style={{width:"5vw", fontWeight:"bold", fontHeight:"20vw", float:"left", marginLeft:"10%"}}>销售净利率</p>
                    <ReactEcharts option={this.state.option_7} notMerge={true}
                                  style={{width:"100%", height:"18vh", marginLeft:"5%"}}/>
                    <p style={{width:"5vw", fontWeight:"bold", fontHeight:"20vw", float:"left", marginLeft:"10%"}}>成本利润率</p>
                    <ReactEcharts option={this.state.option_8} notMerge={true}
                                  style={{width:"100%", height:"18vh", marginLeft:"5%"}}/>
                    <p style={{width:"4vw", fontWeight:"bold", fontHeight:"20vw", float:"left", marginLeft:"10%"}}>盈余现金保障倍数</p>
                    <ReactEcharts option={this.state.option_9} notMerge={true}
                                  style={{width:"100%", height:"18vh", marginLeft:"5%"}}/>
                </div>
            </div>
        );
    }
}